﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../js/jq/jquery.lastest.js"></script>
    <script src="../../../js/ko/knockout.lastest.js"></script>

    <script src="../../../js/core/jquery.splitter.js"></script>
    <script src="../../../js/core/CCSV.js"></script>

    <link href="../../../css/yaml/core/base.css" rel="stylesheet" />
    <link href="../../../css/yaml/forms/gray-theme.css" rel="stylesheet" />
    <link href="../../../css/yaml/screen/typography.css" rel="stylesheet" />
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 12px;
        }

        .ym-wrapper
        {
            width: 650px;
            padding: 5px;
        }

        .ym-form
        {
            background: #fff;
        }

            .ym-form legend
            {
                padding: 0 0;
            }

            .ym-form .ym-fbox
            {
                padding: 0px;
            }

            .ym-form .ym-fbox-footer
            {
                background: #fff;
                border-top: 1px #e0e0e0 solid;
                padding: 1em .5em;
                margin: 0;
            }

        .box
        {
            margin: 0px;
            padding: 10px;
        }
    </style>
    <script src="js/index.js"></script>
    <script type="text/javascript">
        //----------------------------------------------------------------------------------
        // $.core.extend
        //----------------------------------------------------------------------------------
        $.mapField = function (jsonData, instance) {
            for (var att in jsonData) {
                try {
                    var attValue = jsonData[att];
                    if (typeof instance[att] == 'function')
                        instance[att](attValue);
                    else
                        instance[att] = attValue;
                }
                catch (e) {
                    console.log('$.Json2Object', e);
                }
            }
            return instance;
        }
        $.Json2Object = function (jsonData, classFunction) {
            var obj = new classFunction();
            return $.mapField(jsonData, obj);
        };

        //----------------------------------------------------------------------------------
        // ko.core.extend
        //----------------------------------------------------------------------------------
        function CBaseViewModel() {
            var self = this;
            self.className = 'CBaseViewModel';
            self.getEntryData = {};

            self.save = function () {
                var instanceObj = this;
                console.log('CBaseViewModel.save');
                console.log('  + instance of: ' + instanceObj.className);
                console.log('  + toJSON: ' + ko.toJSON(instanceObj.getEntryData()));
            };
            self.load = function (id) {
                var instanceObj = this;
                console.log('CBaseViewModel.load');

                //load portfolio by id from server, return json || csv > json
                var json = { Code: 'Helen', Name: 'Thiên Trang', Password: '123456', Birthdate: '2008-04-02', National: '3', Favorite: ['2', '3'] };

                //show entry info
                instanceObj.showEntry(json);
            }
        }

        //----------------------------------------------------------------------------------
        // entry.business.jf
        //----------------------------------------------------------------------------------
        function CPortfolio(jsondata) {
            var self = this;
            
            jsondata = jsondata || {};
            self.Code = ko.observable(jsondata.Code);
            self.Name = ko.observable(jsondata.Name);
            self.Password = ko.observable(jsondata.Password);
            self.Birthdate = ko.observable(jsondata.Birthdate);
            self.IssueDate = ko.observable();
            self.National = ko.observable(jsondata.National);
            self.Favorite = ko.observableArray(jsondata.Favorite);

            self.validateMessage = ko.observable();
            self.isValid = ko.computed(function () {
                console.log('CPortfolio.isValid');

                var ret = true;
                self.validateMessage(null);

                //Age > 18 || IssueDate == null
                if (typeof self.Birthdate() != 'undefined') {
                    if (typeof self.IssueDate() != 'undefined') {
                        var start = new Date(self.Birthdate());
                        var end = new Date(self.IssueDate());
                        var diff = new Date(end - start);
                        var age = parseInt(diff / 1000 / 60 / 60 / 24 / 365);
                        if (age < 18) {
                            ret = false;
                            self.validateMessage('Not enough 18 years old !!!');
                        }
                    }
                }

                //Code, Name != undefined
                if (self.Code() == undefined || self.Code() == '') {
                    self.validateMessage('Code: Require!!!');
                    ret = false;
                } else
                    if (self.Name() == undefined || self.Name() == '') {
                        self.validateMessage('Name: Require!!!');
                        ret = false;
                    } else
                        if (self.Birthdate() == undefined) {
                            self.validateMessage('Birthdate: Require!!!');
                            ret = false;
                        }

                console.log('+ ret:', ret, self.validateMessage());
                return ret;
            }, this, { deferEvaluation: true });

            self.statusInfo = ko.computed(function () {
                var br = '<br/>';
                var info = 'Portfolio Information' + br +
                            '  + Code: ' + self.Code() + br +
                            '  + Name: ' + self.Name() + br +
                            '  + Password: ' + self.Password() + br +
                            '  + Birthdate: ' + self.Birthdate() + br +
                            '  + IssueDate: ' + self.IssueDate() + br +
                            '  + National: ' + self.National() + br +
                            '  + Favorite: ' + self.Favorite() + br +
                            '  + isValid: ' + self.isValid() + br +
                            '  + validateMessage: ' + self.validateMessage();
                return info;
            });
        }
        function CPortfolioViewModel(port) {
            var self = this;
            self.className = 'CPortfolioViewModel';
            self.getEntryData = function () {
                return self.Portfolio();
            }

            //-----------------------------------------------------
            // Properties
            //-----------------------------------------------------  
            self.Portfolio = ko.observable(port);
            self.Nationals = ko.observableArray();
            self.Favorites = ko.observableArray();

            //-----------------------------------------------------
            // Behaviours.Client-Side
            //-----------------------------------------------------
            self.showEntry = function (jsonData) {
                var port = new CPortfolio(jsonData);
                portVM.Portfolio(port);
            }
            self.clear = function () {
                portVM.Portfolio(new CPortfolio());
            }
            self.isEditMode = ko.computed(function () {
                console.log('CPortfolioViewModel.isEditMode');
                var ret = false;
                if (typeof self.Portfolio() != undefined && self.Portfolio().Code() != undefined)
                    ret = true;
                console.log('+ ret:', ret);
                return ret;
            });

            //-----------------------------------------------------
            // Behaviours.Server-Side
            //-----------------------------------------------------
            self.init = function () {
                $.post('service/data.ashx',
                    { action: 'getInfo' },
                    function (data) {
                        var list = data.CSV2JSON2();
                        self.Nationals(list[1]);
                        self.Favorites(list[2]);

                        ko.applyBindings(self);
                    });
            };
        }
        CPortfolioViewModel.prototype = new CBaseViewModel();

        //----------------------------------------------------------------------------------
        // page.ready
        //----------------------------------------------------------------------------------
        var portVM;
        $(function () {
            var port = new CPortfolio();
            portVM = new CPortfolioViewModel(port);
            portVM.init();
        });
    </script>
</head>
<body>
    <div class="ym-wrapper">
        <form class="ym-form ym-columnar">
            <fieldset class="my-entry-form">
                <legend>Portfolio Information</legend>
                <div class="ym-fbox">
                    <label>
                        Code:
                    </label>
                    <input type="text" title="Code" class="wMid" data-bind="value: Portfolio().Code" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Name:
                    </label>
                    <input type="text" title="Name" class="wLong" data-bind="value: Portfolio().Name" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Password:
                    </label>
                    <input type="password" class="wMid" data-bind="value: Portfolio().Password" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Birth date:
                    </label>
                    <input type="date" class="wLong" data-bind="value: Portfolio().Birthdate, valueUpdate:'change'" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Issue date:
                    </label>
                    <input type="date" class="wLong" data-bind="value: Portfolio().IssueDate" />
                </div>
                <div class="ym-fbox">
                    <label>
                        National:
                    </label>
                    <select class="wLong" data-bind="options: Nationals, value: Portfolio().National, 
                                                    optionsCaption: 'Select an item...',
                                                    optionsValue: 'ID', optionsText:'Name'">
                    </select>
                </div>
                <div class="ym-fbox">
                    <label>
                        Favorite:
                    </label>
                    <select class="wLong" multiple="multiple" data-bind="options: Favorites, selectedOptions: Portfolio().Favorite, 
                                                                        optionsValue:'ID', optionsText:'Name'">
                    </select>
                </div>
                <div class="ym-fbox-footer ym-fbox-button">
                    <input type="button" value="Save » Database " class="ym-button ym-primary" data-bind="enable: Portfolio().isValid, click:save" />
                    <input type="button" value="Load » Show" data-bind="click: load" class="ym-button ym-success" />
                    <input type="button" value="Clear" data-bind="click: clear, enable: isEditMode" class="ym-button ym-danger" />
                </div>

                <!-- ko ifnot:Portfolio().isValid -->
                <div class="box error" data-bind="text:Portfolio().validateMessage"></div>
                <!-- /ko -->
                <div class="box info" data-bind="html:Portfolio().statusInfo"></div>
            </fieldset>
        </form>
    </div>
</body>
</html>
